// Import Swiper Vue.js components
import { Swiper } from 'swiper/vue'
import type { Swiper as SwiperClass } from 'swiper/types'

// Import Swiper styles
import 'swiper/css'

interface DataType {
  /**
   * .slide.active的Index
   */
  contentActive: number
  /**
   * swiper的ref
   */
  swiperRef?: SwiperClass
}

// options参数
type SwiperPropsType = InstanceType<typeof Swiper>['$props']

// 外部传递参数，不能有on-swiper
type SWiperPropsParams = Omit<SwiperPropsType, 'onSwiper' | 'on_swiper' | 'onSlideChange'>

export function useContentSwiper(options?: SWiperPropsParams) {
  const data = reactive<DataType>({
    contentActive: 0,
    swiperRef: undefined,
  })
  const swiperOptions: SwiperPropsType = {
    grabCursor: true,
    loop: true,
    ...options,
    onSlideChange: ({ realIndex }) => {
      data.contentActive = realIndex
    },
    onSwiper: (swiper) => {
      data.swiperRef = swiper
    },
  }

  function to(i: string | number) {
    data.swiperRef?.slideToLoop(Number(i))
  }
  function toPrev() {
    data.swiperRef?.slidePrev()
  }
  function toNext() {
    data.swiperRef?.slideNext()
  }

  return {
    ...toRefs(data),
    swiperOptions,
    to,
    toPrev,
    toNext,
  }
}
